﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue示例</title>
    <link type="text/css" href="js/down.css" rel="Stylesheet" />
    <script type="text/javascript" src="js/jquery-1.4.min.js"></script>
    <script type="text/javascript" src="js/down.app.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/down.edge.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/down.file.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/down.folder.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/down.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/vue.min.js" charset="utf-8"></script>
</head>
<body>
    <p>此页面演示down2功能。</p>
    <p>down2提供文件下载，文件夹下载，文件批量下载，文件自定义下载功能。</p>
    <p><a href="db/clear.jsp" target="_blank">清空数据库</a></p>
    <div id="vue-down2">
        <input type="button" value="下载测试文件" ref="btnDown" />
        <input type="button" value="自定义下载名称" ref="btnDownDiyname" />
        <input type="button" value="批量下载文件" ref="btnDownFiles" />
        <input type="button" value="下载文件夹" ref="btnDownJson" />
        <input type="button" value="下载多级文件夹" ref="btnDownFD" />
        <input type="button" value="自定义下载数据" ref="btnDownSvr" />
        <input type="button" value="自定义下载数据+目录" ref="btnDownSvrFD" />
        <input type="button" value="下载文件并安装" ref="btnDownRun" />
        <down2 ref="down2"></down2>
    </div>
    <script type="text/javascript" language="javascript">
        //定义组件
        Vue.component('down2', {
            data() { return { app: null } },
            props: {},
            mounted() {
                this.app = new DownloaderMgr();
                this.app.Config["Folder"] = "";//设置默认下载路径。
                //挂载事件
                this.app.event.taskCreate = function (obj) { $(document.body).append("文件ID：" + obj.fileSvr.id) + "<br/>"; };
                this.app.event.downProcess = function (obj) { };
                this.app.event.downStoped = function (obj) { };
                this.app.event.downComplete = function (obj) {
                    $(document.body).append('<div>本地路径：' + obj.fileSvr.pathLoc + '</div>');
                };
                this.app.event.downError = function (obj, err) { };
                this.app.event.queueComplete = function () { $(document.body).append("<div>队列完成</div>"); };
            this.app.loadTo("down2-tmp");
            },
            methods: {},
            destroyed() { },
            template: '<div id="down2-tmp"></div>'
        });

        //创建vue对象
        var ue = new Vue({
            el: '#vue-down2',
            data: {}
            , methods: {}
            , mounted: function () {
                var downer = this.$refs.down2.app;

                $(this.$refs.btnDown).click(function () {
                    if (downer.Config["Folder"] == "") { downer.openFolder(); return; }
                    var f = { fileUrl: "http://www.ncmem.com/images/ico-ftp.jpg" };
                    downer.addUrl(f);
                });
                $(this.$refs.btnDownDiyname).click(function () {
                    if (downer.Config["Folder"] == "") { downer.openFolder(); return; }
                    var f = { fileUrl: "http://res2.ncmem.com/res/images/up6.1/up.png", nameLoc: "test.png" };
                    downer.addUrl(f);
                });
                $(this.$refs.btnDownFiles).click(function () {
                    if (downer.Config["Folder"] == "") { downer.openFolder(); return; }
                    var urls = [
                        { fileUrl: "http://res2.ncmem.com/res/images/ie11.png" }
                        , { fileUrl: "http://res2.ncmem.com/res/images/up6.1/down.png" }
                        , { fileUrl: "http://res2.ncmem.com/res/images/firefox.png" }
                        , { fileUrl: "http://res2.ncmem.com/res/images/edge.png" }
                        , { fileUrl: "http://res2.ncmem.com/res/images/up6.1/cloud.png" }
                        , { fileUrl: "http://res2.ncmem.com/res/images/home/w.png" }
                        , { fileUrl: "http://res2.ncmem.com/res/images/img.png" }
                    ];
                    downer.addUrls(urls);
                });
                $(this.$refs.btnDownJson).click(function () {
                    if (downer.Config["Folder"] == "") { downer.openFolder(); return; }
                    var fd = {
                        nameLoc: "图片列表"
                        , files: [
                            { fileUrl: "http://res2.ncmem.com/res/images/ie11.png" }
                            , { fileUrl: "http://res2.ncmem.com/res/images/up6.1/down.png" }
                            , { fileUrl: "http://res2.ncmem.com/res/images/firefox.png" }
                            , { fileUrl: "http://res2.ncmem.com/res/images/edge.png" }
                            , { fileUrl: "http://res2.ncmem.com/res/images/up6.1/cloud.png" }
                            , { fileUrl: "http://res2.ncmem.com/res/images/home/w.png" }
                            , { fileUrl: "http://res2.ncmem.com/res/images/img.png" }
                        ]
                    };
                    downer.addJson(fd);
                });
                $(this.$refs.btnDownFD).click(function () {

                    if (downer.Config["Folder"] == "") { downer.openFolder(); return; }
                    var fd = {
                        nameLoc: "测试文件夹"
                        , files: [
                            { fileUrl: "http://www.ncmem.com/images/ico-ftp.jpg" }
                            , { fileUrl: "http://www.ncmem.com/images/ico-up.jpg" }
                        ]
                        , folders: [
                            {
                                nameLoc: "图片1"
                                , files: [
                                    { fileUrl: "http://www.ncmem.com/images/ico-ftp.jpg" }
                                    , { fileUrl: "http://www.ncmem.com/images/ico-up.jpg" }
                                    , { fileUrl: "http://www.ncmem.com/images/ico-capture.jpg" }
                                    , { fileUrl: "http://www.ncmem.com/images/ico-imageuploader.gif" }
                                    , { fileUrl: "http://www.ncmem.com/images/ico-wordpaster.gif" }
                                ]
                                , folders: [
                                    {
                                        nameLoc: "软件"
                                        , files: [
                                            { fileUrl: "http://res2.ncmem.com/res/images/edit-file.png" }
                                        ]
                                    }
                                ]
                            }
                        ]
                    };
                    downer.addJson(fd);
                });
                $(this.$refs.btnDownSvr).click(function () {
                    if (downer.Config["Folder"] == "") { downer.openFolder(); return; }
                    var urls = [
                        { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "test.exe" }
                        , { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "test-1.exe" }
                    ];
                    downer.addUrls(urls);
                });
                $(this.$refs.btnDownSvrFD).click(function () {

                    if (downer.Config["Folder"] == "") { downer.openFolder(); return; }
                    var fd = {
                        nameLoc: "测试文件夹"
                        , files: [
                            { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "360.exe" }
                            , { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "360-1.exe" }
                            , { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "360-2.exe" }
                            , { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "360-3.exe" }
                            , { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "360-4.exe" }
                            , { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "360-5.exe" }
                            , { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "360-6.exe" }
                            , { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "360-7.exe" }
                            , { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "360-8.exe" }
                            , { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "360-9.exe" }
                            , { fileUrl: "http://localhost:8080/down2/db/down.jsp", nameLoc: "360-10.exe" }
                        ]
                    };
                    downer.addJson(fd);
                });
                $(this.$refs.btnDownRun).click(function () {
                    //if (downer.Config["Folder"] == "") { downer.openFolder(); return; }
                    var f = { fileUrl: "http://localhost:8080/down2/test.exe" };
                    downer.addUrl(f);
                });
            }
        });
    </script>
</body>
</html>